<template>
  <div id="app" class="page-container">
    <h2 style="margin-top: 0px">Login</h2>

    <img src="../public/images/login.jpg" class="image-container" />

    <div class="formcontainer">
      <el-form :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" required></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input type="password" v-model="form.password" required></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login" class="loginBtn"
            >登录</el-button
          >
        </el-form-item>

        <el-form-item>
          <el-button type="success" @click="onSubmit" class="registerBtn"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  
 
  
  <script>
export default {
  name: "Login",
  data() {
    return {
      form: {},
    };
  },
  methods: {
    login() {
      this.$axios
        .post("http://localhost:8080/api/auth/login", this.form)
        .then((response) => {
          localStorage.setItem("token", response.data.accessToken);
          this.$store.dispatch("login", response.data.accessToken);
          // console.log(response);
          // console.log(response.data.roles[0]);
          // console.log(response.data.accessToken);

          const role = response.data.roles[0];
          // 根据角色信息跳转到对应的页面
          if (role === "ROLE_ADMIN") {
            this.$router.push("/admin");
          } else if (role === "ROLE_USER") {
            this.$router.push("/user");
          }
        })
        .catch((error) => console.log(error));
    },
    onSubmit() {
      this.$router.push({ path: "/register" });
      console.log("submit!");
    },
  },
};
</script>
  
   
  <style>
.page-container {
  /* margin: 120px auto 0 auto; */
  position: center;
  width: 100%;
  height: 730px;

  border-color: #ccc;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0px;
  padding: 0px;
  background-size: 100% 100%;
  background-color: #c8c7c5;
}
.image-container {
  float: left;
  height: 550px;
  width: 900px;
  margin-bottom: 10px;
  border-width: 1px;
  border-radius: 30px;
}
.formcontainer {
  height: 300px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
  padding-right: 80px;
  margin-top: 100px;
  margin-right: 80px;
  background-color: #d8c7b5;
  border-width: 1px;
  border-radius: 30px;
}
form {
  position: center;
  width: 305px;
  margin: 15px auto 0 auto;
  text-align: center;
}
.connect {
  text-align: center;
  width: 305px;
  margin: 35px auto 0 auto;
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  margin-top: 50px;
}
h1 {
  text-align: center;
}
.loginBtn {
  width: 230px;
  text-align: center;
}
.registerBtn {
  width: 230px;
  text-align: center;
}
</style>
  